<template>
    <div class="notice-detail-wrapper" v-loading.fullscreen.lock="fullscreenLoading"  element-loading-text="加载中...">
        <head-date/>
        <div class="text-wrapper">
            <div class="title"><h1>{{data.title}}</h1></div>
            <div class="date">发布时间：{{dateFormat(data.date)}}<el-button @click="print" class="print-btn" type="text"><i class="fa fa-print"></i></el-button></div>
            <div class="content" v-html="data.data"></div>
        </div>
    </div>
</template>

<script>
import headDate from '../../header/headDate.vue'
import {dateFormat} from '../../../scripts/until'

export default {
    name: 'noticeDetail',
    data: function() {	
        return {
            data: {},
            fullscreenLoading: true
        }
    },
    components: {
        headDate,
    },
    methods: {
        // back() {
        //     this.$router.push('/')
        // }
        dateFormat(date) {
            if(date) {
                return dateFormat(date, 'ymdc')
            }
        },
        print() {
            window.print()
        }
    },
    mounted() {
        // this.$route.params.id
        this.$$http('GET_ONE_NOTICE', this.$route.params.id).then(data=>{
            this.data = data;
            this.fullscreenLoading = false;
        })
    }
}
</script>

<style lang="scss">
.notice-detail-wrapper{
    width: 1200px;
    margin: 0 auto;
    position: relative;
    .text-wrapper{
        padding: 30px 150px;
        .title{
            text-align: center;
        }
        .date{
            text-align: center;
            padding: 25px 0 30px;
            font-size: 14px;
            color: #878d99;
            .print-btn{
                font-size: 18px;
                float: right;
                transform: translateY(-15px);
            }
        }
        .content{
            line-height: 1.8;
            table {
                border-top: 1px solid #ccc;
                border-left: 1px solid #ccc;
            }
            table td,
            table th {
                border-bottom: 1px solid #ccc;
                border-right: 1px solid #ccc;
                padding: 3px 5px;
            }
            table th {
                border-bottom: 2px solid #ccc;
                text-align: center;
            }

            blockquote {
                display: block;
                border-left: 8px solid #d0e5f2;
                padding: 5px 10px;
                margin: 10px 0;
                line-height: 1.4;
                font-size: 100%;
                background-color: #f1f1f1;
            }

            code {
                display: inline-block;
                *display: inline;
                *zoom: 1;
                background-color: #f1f1f1;
                border-radius: 3px;
                padding: 3px 5px;
                margin: 0 3px;
            }
            pre code {
                display: block;
            }

            ul, ol {
                list-style: disc;
                margin: 10px 0 10px 20px;
            }
        }
    }
    
}
</style>